import Taro from '@tarojs/taro';
import { View, Image, Text } from '@tarojs/components';
import { AtMessage } from 'taro-ui';
import { useState, useEffect } from "react";
import "taro-ui/dist/style/components/button.scss"; // 按需引入
import Header from '@/components/header';
import ThreeList from '@/components/ThreeList';
import Return from '@/components/Return';
import { getShykList } from '@/api/application/iShyk';
import { noactivity } from '../image.js';
import css from './index.module.less';

/**
 * 应用/三会一课
 */
export default function IshykList() {
  const [classesFlag, setClassesFlag] = useState(false); // 是否有课程的标志
  const [classes, setClasses] = useState([]);
  const [userInfo, setUserInfo] = useState({});

  useEffect(() => {
    Taro.getStorage({
      key: 'userInfo',
      success: function (a) {
        setUserInfo(a.data);
        if (a.data.isAudited !== 1) {
          Taro.atMessage({
            'message': '您还未进行认证',
            'type': 'error',
            'duration': 2000
          });
        } else {
          getShykList(a.data.partyId).then((value) => {
            if (value.code === 200) {
              setClasses(value.data);
              if (value.data.length === 0) {
                setClassesFlag(false);
              } else {
                setClassesFlag(true);
              }
            }
          });
        }
      }
    });
  }, []);

  // 点击卡片
  const clickCard = (e, id) => {
    Taro.navigateTo({ url: `./ishykDtl/index?id=${id}` });
  };


  return (
    <View className={css.home}>
      <Header message='三会一课' left='140px' />
      <Return />
      <View className={css.content}>
        <AtMessage />
        {
          userInfo.isAudited !== 1 ? <View className={css.noAudited}><View>您还未进行认证</View></View> :
            classesFlag ? classes.map(item => (
              <View key={item.id} onClick={e => clickCard(e, item.id)}>
                <ThreeList info={item} />
              </View>
            )) :
              <View className={css.noActivity}>
                <Image className={css.noActivityImage} src={noactivity}></Image>
                <Text className={css.font}>您暂未参加任何课程</Text>
              </View>
        }
      </View>

    </View>
  );

}

